﻿@model Assignment.Models.ViewModel.FilmDetailModel
@{
    ViewBag.Title = @Model.Film.FullTitle;
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<link rel="stylesheet" href="../../Data/Player/build/mediaelementplayer.css" />
<link rel="stylesheet" href="../../Data/Player/build/mejs-skins.css" />
<script src="../../Data/Player/build/jquery.js" type="text/javascript"></script>
<script src="../../Data/Player/build/mediaelement-and-player.js"></script>
<link href="../../Content/ViewPage.css" rel="stylesheet" type="text/css" />
<div id="film-info">
    <div id="film-title">
        <h3>@Model.Film.FullTitle</h3>
    </div>
    <div id="info-left">
        <img src=" @Model.Film.Poster">
    </div>
    <div id="info-right">
        <div id="info-releaseyear">
            <b>Năm sản xuất:</b> @Model.Film.ReleaseYear
        </div>
        <div id="info-category">
            <b>Thể loại:</b> @Model.Film.Category.Name
        </div>
        <div id="info-length">
            <b>Độ dài:</b> @Model.Film.Length phút
        </div>
        <div id="info-Des">
            <b>Mô tả:</b><br>
            @Model.Film.Description
        </div>
    </div>
</div>
<div id="film-blank1">
</div>
<div id="film-play" class="film-show">
    <div id="play-video" class="film-show">
        <video class="film-show" width="100%" height="100%" controls="controls" preload="none" poster="@Model.Film.Poster">
		    <source src="../../Data/Video/video3.mp4"/>
		    <track kind="subtitles" src="../../Data/Video/video3.srt" srclang="vn" /> 
        </video>
    </div>
    <div id="play-banner" class="film-show">
        <a href="#" id="play-light" class="film-show">Tắt đèn</a> Views: @Model.Film.ViewCount
    </div>
</div>
<div id="film-blank2">
</div>
<div id="film-comment">
    <div id="comment-list">
        @foreach (var item in Model.ListComment)
        {        
            <div id="comment-item" comID="@item.ID">
                <div id="comment-info">
                    <img id="comment-image" src="../../Content/banner/user.png" />
                    <span id="comment-user">@item.Username</span> <span id="comment-time">@item.DateTime.ToString("yyyy-MM-dd hh:mm:ss")</span>
                </div>
                <div id="comment-content">
                    @item.Content
                </div>
            </div>
        }
    </div>
    <div id="comment-form">
        <form action="">
        <table>
            <tr>
                <td>
                    Tài khoản:
                </td>
                <td class="td-input">
                    <input class="comment-input" id="comment-username" type="text" name="username" value="@(this.Session["username"] ?? "")" disabled />
                    <input id="comment-filmId" type="hidden" name="filmId" value="@this.Model.Film.ID"/>
                </td>
            </tr>
            <tr>
                <td>
                    Nội dung <span class="required">*</span>:
                </td>
                <td class="td-input">
                    <textarea class="comment-input" id="comment-content" cols="80" rows="2" name="content"
                        required /></textarea>
                </td>
            </tr>
            <tr>
                <td>
                </td>
                <td class="td-input">
                    <input class="btn comment-input" id="comment-submit" type="submit" value="Bình luận" />
                </td>
            </tr>
        </table>
        </form>
    </div>
</div>
<script type="text/javascript">
    $("#play-light").click(function (e) {
            e.preventDefault();
            $("*").toggleClass("off-light");            
            $('#film-play').find('*').removeClass("off-light");       
            if($('#play-light').text()=='Bật đèn')
            {
                $('#play-light').text("Tắt đèn");
            }else
            {
                $('#play-light').text("Bật đèn");
            }
     });
    
    $('audio,video').mediaelementplayer({
        // auto-select this language (instead of starting with "None")
        startLanguage: 'vn',
        // automatically translate into these languages
        translations: ['vn'],
        // enable the dropdown list of languages
        translationSelector: true,
        success: function (media, node, player) {
            var events = ['loadstart', 'play', 'pause', 'ended'];
            for (var i = 0, il = events.length; i < il; i++) {
                var eventName = events[i];
                media.addEventListener(events[i], function (e) {
                    /*$('#output').append($('<div>' + e.type + '</div>'));*/
                });
            }
            //console.log(player, node, media);
        },
        error: function () {

        }
    });

     $("#comment-submit").click(function (e) {
            e.preventDefault();
            var username= $('#comment-username').val();
            var content = $('textarea#comment-content');
            var contentValue=content.val();
            var filmId = $('#comment-filmId').val();
            var dataPost = "username="+username+"&content="+contentValue+"&filmId="+filmId;
            console.log(dataPost);
            $.ajax({
			    type : "Post",
			    url : "/Film/Comment",
			    data : dataPost,
			    success : function(data){
					    if(eval(data)>0)
                        {
                            //clear old comment
                            content.val("");                                                    
                            //add virtual comment
                            var commentlist = $("#comment-list");
                            var newComment = '<div id="comment-item" comID="'+eval(data)+'"><div id="comment-info">'
                            +'<span id="comment-user">'+username+'</span> <span id="comment-time">vừa mới đây</span>'
                            +'</div><div id="comment-content">'+contentValue+'</div></div>';
                            commentlist.append(newComment);
                        }else
                        {
                            alert("Comment Error!");
                        }                                               
       	    	    },
       		    error : function(){
       				    console.log('Comment Error');
       			    },
  			    complete : function(){ 

  				    },
		    });
        
        });
</script>
